React = require('react')
{View,Image,InteractionManager,Text,ScrollView,TouchableHighlight,StyleSheet,Navigator,ListView,TouchableOpacity,ActivityIndicator} = require('react-native')
Dimensions = require('Dimensions')
{ width, height } = Dimensions.get('window')
moment = require('moment')
TopNotice = require('antd-mobile/lib/notice-bar')
_ = require('underscore')
# {View,InteractionManager,Image,Text,ScrollView,TouchableHighlight,StyleSheet,Navigator,ListView,TouchableOpacity} = require('react-native')
RefreshControl = require('antd-mobile/lib/refresh-control')
# Drawer = require('antd-mobile/lib/drawer')
ActionSheet = require('antd-mobile/lib/action-sheet')
backImg = require('../img/back.png')
searchIcon = require('../img/search_white.png')

BasePage =
  getInitialState:->
    @ds = new ListView.DataSource rowHasChanged:(r1,r2)->r1 isnt r2
    @gqState = 0
    {
      isFirstLoad:true
      ready:false
    }
  _processTime:(time)->
    t = moment(time)
    if t.isValid()
      t.format('DD/hhmm')
    else
      ""
  refreshList:->
    @props.fetchRefresh(@gqState)
  onEndReached:(event)->
    # return if @props.isLoading or @props.refreshing or @props.completed
    # @props.fetchGet(@props.pageIndex+1,@gqState)
  componentDidMount:->
    @initFetchData()
  initFetchData:->
    debugger
    @props.fetchRefresh(@gqState) if @props.connected
    InteractionManager.runAfterInteractions =>
      @setState isFirstLoad:false,ready:true
  # initFetchData:->
  #   if @props.connected
  #     setTimeout =>
  #       @props.fetchRefresh(@gqState)
  #       @setState isFirstLoad:false
  #     ,0
  #   else
  #     @setState
  #       isFirstLoad:false
  delayLoad:(duration)->
    setTimeout =>
      debugger
      if @props.lastFetchTime
        lastTime = moment(@props.lastFetchTime)
        currTime = moment(new Date())
        if currTime.subtract(duration).isAfter(lastTime)
          @props.fetchRefresh(@gqState)
      else
        @props.fetchRefresh(@gqState)
    ,800
  _renderHeader:->
      <View style={{flexDirection:'row',flex:0,height:60,alignItems:'center', justifyContent:'center',backgroundColor:'#0066FF'}}>
        <View style={{flex:1,padding:10}}>
          <TouchableOpacity onPress={=>@props.navigator.pop()}>
            <Image source={backImg}  style={{height:30,width:30,resizeMode:'contain'}}/>
          </TouchableOpacity>
        </View>
        <View style={{flex:1,justifyContent:'center',alignItems:'center'}}>
          <Text style={{fontSize:20,color:'#ffffff'}}>{@props.title}</Text>
        </View>
        <View style={{flex:1,alignItems:'flex-end',padding:10}}>
          <TouchableOpacity onPress={@_showActionSheet}>
            <Image source={searchIcon}  style={{height:30,width:30,resizeMode:'contain'}}/>
          </TouchableOpacity>
        </View>
      </View>
  _renderBody:->
    if @state.isFirstLoad
      <View style={width:width,height:height,backgroundColor:'#ffffff'}/>
    else
      @_renderListView()
  _renderListHeader:->
    if @props.connected is false and @props.list.length>0
      <TopNotice mode="closable" style={{margin:10}}>
        无网络连接，您现在看到的是缓存数据
      </TopNotice>
  _renderListFooter:(e)->
    debugger
    listView = @refs.listView
    curRenderedRowsCount = listView?.state.curRenderedRowsCount
    if @props.completed and curRenderedRowsCount>0 and curRenderedRowsCount is @props.list.length+1
      <View style={{flexDirection:'row',justifyContent:'center',paddingTop:20,paddingBottom:30}}>
        <Text>到底了</Text>
      </View>
    else unless @props.refreshing
      <View style={{flexDirection:'row',justifyContent:'center',paddingTop:20,paddingBottom:30}}>
        <ActivityIndicator size='small'></ActivityIndicator>
        <Text style={{marginLeft:5}}>正在加载</Text>
      </View>
    else
      <View/>
  _renderListSeparator:(sectionID,rowID,adjacentRowHighlighted)->
    <View key={"#{sectionID}-#{rowID}"} style={{height:1,backgroundColor:if adjacentRowHighlighted then '#3B5998' else '#CCCCCC'}}/>
  _renderListView:->
    <ListView ref="listView" dataSource={@dataSource} style={{flex:1}}
          enableEmptySections={true}
          renderHeader={@_renderListHeader}
          renderRow={@_renderRow}
          renderSeparator={this._renderListSeparator}
          renderFooter={@_renderListFooter}
          initiaListSize:10
          pageSize={20}
          scrollEventThrottle={20}
          onEndReached={@onEndReached}
          onEndReachedThreshold={50}
          removeClippedSubviews={true}
          refreshControl={
            <RefreshControl refreshing={@props.refreshing} onRefresh={@refreshList}
                distanceToRefresh={60}
                resistance={2.5}
                hammerOptions={{
                  touchAction:'auto'
                  recognizers:
                    pan:
                      threshold:10
                  }}/>
          }>
    </ListView>
  _drawerContent:->
    <View style={{width:width/3,backgroundColor:'#000000'}}>
      <Text>1</Text>
      <Text>1</Text>
      <Text>1</Text>
      <Text>1</Text>
      <Text>1</Text>
      <Text>1</Text>
    </View>
  _showActionSheet:->
    that = @
    debugger
    ActionSheet.showActionSheetWithOptions
      options:['全部','上海','洋山','金山孚宝','绿化山','交接中心']
      message: ''
    ,(buttonIndex)->
      debugger
      that.gqState= buttonIndex
      debugger
      that.refs.listView.scrollTo {x:0,y:0,animated:false}
      that.refreshList()
  componentWillUpdate:(nextProps)->
    # if @props.list isnt nextProps.list
    #   @dataSource = @ds.cloneWithRows(nextProps.list)
  render:->
    @dataSource = @ds.cloneWithRows(@props.list)
    <View style={width:width,height:height,flexDirection:'column',backgroundColor:'#ffffff',paddingBottom:10}>
      {@_renderHeader()}
      {
        if @state.ready then @_renderBody()
      }
    </View>
module.exports = BasePage
